<template>
		
	<view class="content">
		<narvBarSearch titleText="首页" titleColor="#fff"></narvBarSearch>
		
		<searchBarTab></searchBarTab>
		<view class="page-content">
		<view class="swiper-content">
			<swiper class="swiper-box" :indicator-dots="true" indicator-color="#ffd3ff" indicator-active-color="#bbff4c" :autoplay="true" :interval="3000" :duration="1000">
				<template v-for="item in swiperImg " :key="item">
					<swiper-item class="swiper-items">
						<image :src="item" mode="aspectFill"></image>
					</swiper-item>
				</template>
				
				
			</swiper>
		</view>
		
		<noticeContent :noticeData="noticeData"></noticeContent>
		<view class="icons-button">
			<template v-for="item in tabButton" :key="item">
				<view class="btn-box" @click="clickPage(item.path)"> 
				<view class="btn-img" :style="{background:`${item.color}`}">
					<image :src="item.img" mode="aspectFill"></image>
				</view>
				<view class="btn-title">
					{{item.title}}
				</view>
				</view>
				
			</template>
			
		
		
		</view>
		
		<view class="lucky-activity">
			<image src="/static/images/lucky.png" mode="aspectFill"></image>
		</view>
		<view class="hot-goods">
			<view class="hot-top">
				<view class="top-left">
					<view class="left">
						
					</view>
				<view class="title">
						热销产品
				</view>
					
				</view>
				<view class="top-right">
					查看更多
					<uni-icons type="right" size="20" color="#ead5ff"></uni-icons>
				</view>
				
			</view>
			<view class="hot-goods-content">
				<template v-for="(item,index) in goodsList" :key="item">
					<view class="goods-items" @click="goodsInfo(item)">
						<view class="goods-img">
							<image :src="item.img[0]" mode="aspectFill"></image>
							
						</view>
						<view class="hot-introduce">
							{{item.introduce}}
							
						</view>
						<view class="goods-price">
							<view class="now-price">￥{{formatNum(item.price,{numb:2})}}
								
							</view>
							<view class="old-price">
								￥{{formatNum(item.oldPrice ,{numb:2})}}
								
							</view>
						</view>
						
					</view>
				</template>
				
			</view>
		</view>
		
			</view>
	</view>
</template>

<script setup>
import narvBarSearch from '../../components/narv-bar-search.vue';
import { useNarvcontent } from '@/utils/narvData.js';
import { formatNum } from '../../utils/numbformat';
import searchBarTab from '../../components/search-bar-tab.vue';
import noticeContent from '../../components/notice-content.vue';
import {ref}from 'vue'
	const title=ref('title')
	const {topContentH}=useNarvcontent.value
	const swiperImg=ref([ '/static/images/1.jpg',
  '/static/images/2.jpg',
  '/static/images/3.jpg'])
    const noticeData=ref([{
		title:'米哦啊买哦吗',
	},{
		title:'米哦啊买哦吗',
	},{
		title:'米哦啊买哦吗',
	},{
		title:'米哦啊买哦吗米哦啊买哦米哦啊买哦吗米哦啊买哦吗吗',
	},])
	const tabButton=ref([{
		img:'/static/images/imgIcons/布偶猫.svg',
		title:'我的积分',
		color:	'linear-gradient(to bottom,	#EEE8AA,#fff)',
		path:'/pages/person/myPoint/myPoint'
	},
	{
		img:'/static/images/imgIcons/黑猫.svg',
		title:'购物商城',
		color:	'linear-gradient(to bottom,	#CDC9C9,#fff)',
		path:'/pages/shop/category'
	},
	{
		img:'/static/images/imgIcons/三花猫.svg',
		title:'商家地图',
		color:	'linear-gradient(to bottom,	#FFA500,#fff)',
		path:'/pages/shop/businessMap/businessMap'
	},
	{
		img:'/static/images/imgIcons/羊.svg',
		title:'我要合作',
		color:	'linear-gradient(to bottom,#98FB98,#fff)',
		path:'/pages/person/cooperate/cooperate'
	},
	
	])
	const goodsList=ref([{
		img:['/static/images/goods.jpg','/static/images/goods.jpg','/static/images/goods.jpg','/static/images/goods.jpg',],
		introduce:'百度翻译是一款领先的AI大模型翻译',
		price:9999,
		oldPrice:999900
	},{
		img:['/static/images/goods.jpg','/static/images/goods.jpg','/static/images/goods.jpg','/static/images/goods.jpg',],
		introduce:'百度翻译是一款领先的AI大模型翻译',
		price:9999,
		oldPrice:999900
	},{
		img:['/static/images/goods.jpg','/static/images/goods.jpg','/static/images/goods.jpg','/static/images/goods.jpg',],
		introduce:'百度翻译是一款领先的AI大模型翻译',
		price:9999,
		oldPrice:999900
	},{
		img:['/static/images/goods.jpg','/static/images/goods.jpg','/static/images/goods.jpg','/static/images/goods.jpg',],
		introduce:'百度翻译是一款领先的AI大模型翻译',
		price:9999,
		oldPrice:999900
	},])
	function clickPage(path)
	{
		console.log(path);
		if(path==='/pages/shop/category')
		{
			console.log('lll');
			uni.switchTab({
			  url: path
			})
		}
		
		else{
			uni.navigateTo({
				url:path
			})
		}
		
	}
	//商品详情
	function goodsInfo(goods){
		uni.navigateTo({
			url:`/pages/shop/goodsInfo/goodsInfo?goods=${encodeURIComponent(JSON.stringify(goods))}`
		})
	}
	
</script>

<style lang="scss" scoped>
	.content {
		
		.page-content{
			padding:20rpx 32rpx;
			position: relative;
			overflow: hidden;
			&::before{
				content: '';
				display: block;
				width: 984rpx;
				height: 522rpx;
				border-radius: 50%;
				background: #ffd5fd;
				position: absolute;
				left: calc(50% - 492rpx);
				top:-350rpx;
				color:	linear-gradient(to bottom,red,green);
			
				
			}
		}
	.swiper-content{
		width: 100%;
	   display: flex;
	   flex-direction: column;
		justify-content: center;
		align-items: center;
	//swiper会默认设置高度150px，此时就需要自己设置高度了
	.swiper-box{

		width: 100%;
		
		height: 352rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		.swiper-items{
	
			
			image{
				width: 686rpx;
				height: 352rpx;
				
			
			
				border-radius: 15px;
			}
		}
			
			
		}
	}
	// 中间内容notice-title使用了flex：1就要将两边flex-shrink设为0，防止挤压
	.notice-content{
		width: 100%;
		height: 40rpx;
		margin-top: 20rpx;
		display: flex;
		text-align: left;
		justify-content: space-between;
		align-items: center;
			.notice-icons{
				flex-shrink: 0;
				width: 88rpx;
				height: 40rpx;
	
				image{
					width: 88rpx;
					height: 40rpx;
					
				}
			}
			.notice-title{
				width:100%;
					flex: 1;
					
					padding: 20rpx;
					font-size: 16px;
					color: #2f2f2f;
					
					
					
			}
		.notice-swiper{
			width:100%;
			height: 40rpx;
			.notice-swiper-item{
				height: 100%;
				line-height: 40rpx;
				text-decoration:underline;
				@include text-ellipsis(1);
			}
		}
		.notice-arrow{
			flex-shrink: 0;
			
		}
	}
	.icons-button{
	padding-top: 45rpx;
		width: 100%;
		height: 180rpx;
		gap: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.btn-box{
			width: 100%;
			height: 100%;
		
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		
		
			.btn-img{
				width: 100%;
				height: 100%;
					border-radius: 50%;
					background-color: #f8dcff;
				image{
					width: 90%;
					height: 90%;
				}
			}
		}
		
	}
	
	.lucky-activity{
		padding-top: 45rpx;
		width: 100%;
		height: 175rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.hot-goods{
		.hot-top{
			width: 100%;
			height: 54rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			
			.top-left{
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left{
					width: 6rpx;
					height: 32rpx;
					background-color: #d9cb91;
					margin-right: 10rpx;
					border-radius: 25%;
				}
				font-size: 45rpx;
				color: #d9cb91;
			}
			.top-right{
				font-size: 32rpx;
				color: #cecece;
			}
			
		}
	
	.hot-goods-content{
		width: 100%;
		margin-top: 26rpx;
	
		display: grid;
		gap: 40rpx;
		grid-template-columns: repeat(2,minmax(0,1fr));
		.goods-items{
			
			image{
				border-radius: 5%;
				width: 316rpx;
				height: 316rpx;
			}
			
		}
		.hot-introduce{
			@include text-ellipsis(1);
		}
		.goods-price{
			display: flex;
			justify-content: start;
			align-items: end;
			.now-price{
				font-size: 36rpx;
				font-weight: 500;
				color:  rgba(255, 15, 35, 1);
;
			}
			.old-price{
				font-size: 20rpx;
				  text-decoration: line-through;
				  color: rgba(187, 187, 187, 1);
				
			}
	
		}
		
	}
	}
	}
	

	
</style>
